<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./ToDoList.css">
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
    <header>
        <section>
                <label for="title">ToDoList</label>
                <input v-model="inputValue" @keyup.enter="addEvent"
                        type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off">
        </section>
    </header>
    <section>
        <h2>正在进行</h2>
            <ol id="todolist" class="demo-box">
                <transition-group
                        name="custom"
                        enter-active-class="animated fadeInLeftBig"
                        leave-active-class="animated fadeOutRight"
                >
                <li class="todoItem" v-for="item in doingList" :key="item.id">
                    <input type="checkbox" @click.prevent="checkDone(item.id)">
                    <p>{{item.content}}</p>
                    <a @click="remove(item.id)">-</a>
                </li>
                </transition-group>
            </ol>
        <h2>已经完成</h2>
        <ul id="donelist">
            <transition-group
                    name="custom"
                    enter-active-class="animated fadeInLeftBig"
                    leave-active-class="animated fadeOutRight"
            >
            <li class="todoItem" v-for="item in doneList" :key="item.id">
                <input type="checkbox" checked @click.prevent="checkDone(item.id)">
                <p>{{item.content}}</p>
                <a @click="remove(item.id)">-</a>
            </li>
            </transition-group>
        </ul>
    </section>
</div>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            todoList:[],
            inputValue: ""
        },
        computed:{
            //通过过滤数据。得到未做好的列表和已做好的列表
            doingList:function () {
                let arr=this.todoList.filter(function (item,index) {
                    return !item.isDone
                })
                return arr;
            },
            doneList:function () {
                let arr=this.todoList.filter(function (item,index) {
                    return item.isDone
                })
                return arr;
            }
            },
        methods:{
            addEvent:function () {
                //添加数据
                this.todoList.push({
                    content:this.inputValue,
                    isDone:false,
                    id:this.todoList.length
                })
                //保存
                this.saveData();
                //输入完成后清除input的值
                this.inputValue="";
            },
            //将数据保存到本地存储
            saveData:function(){
                localStorage.todoList=JSON.stringify(this.todoList)
            },
            //进行=>完成
            checkDone:function(index){
              this.todoList[index].isDone= !this.todoList[index].isDone;

            //每次修改都必须保存
               this.saveData();
            },
            remove:function (id) {
                this.todoList.splice(id,1)
                //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
                localStorage.todoList=JSON.stringify(this.todoList)
                this.todoList.forEach((item,i)=>{
                    item.id=i;
                })
            }
        },
        mounted:function () {
            //JSON.parse()可以把JSON规则的字符串转换为JSON对象，
            this.todoList=localStorage.todoList?JSON.parse(localStorage.todoList):[];
        }
    })
</script>
</body>
</html>